---
title: "Tree Data - Data Paths"
enterprise: true
---
Configure the grid to display structured data by providing data paths.

## Providing Hierarchy

Each row's position in the hierarchy must be provided to the grid as an array of strings, representing the path to the row.
The `getDataPath` callback is used to provide the grid with this path for each row.

The below structure demonstrates a simple hierarchy, wherein the grid would expect the `getDataPath` callback to return the `path` field:
```
const data = [
    { path: ['A'], id: 'A' },
    { path: ['A', 'B'], id: 'B' },
    { path: ['A', 'B', 'C'], id: 'C' },
]
```
In the above hierarchy, the 'A' row is the parent of 'B', and 'B' is the parent of 'C'.

{% note %}
Each path is a unique identifier which the grid uses to determine the hierarchy of the data.

Refer to [Displayed Values](./tree-data-paths/#providing-group-values) to learn how to represent identical siblings.
{% /note %}

## Providing Group Values

The Group Column cells are populated by the path keys as a default. As these keys must be unique, it can be preferable to display a different value.
This can be overridden by providing a `field` or `valueGetter` in the `autoGroupColumnDef` grid option.

{% gridExampleRunner title="Displayed Values" name="duplicate-paths" exampleHeight=250 /%}

The above example uses the following configuration to show two 'Bob Stevens' working within the same team, where the path is comprised of unique employee IDs:
```{% frameworkTransform=true %}
const gridOptions = {
    treeData: true,
    rowData: [
        { employeeId: '1', name: 'Alice Johnson', path: ['1'] },
        { employeeId: '2', name: 'Bob Stevens', path: ['1', '2'] },
        { employeeId: '3', name: 'Bob Stevens', path: ['1', '3'] },
        { employeeId: '4', name: 'Jessica Adams', path: ['1', '4'] },
    ],
    getDataPath: data => data.path,
    autoGroupColumnDef: {
        field: 'name', // display the name instead of the path key
    },
}
```

## Filler Groups

When providing tree data, the grid will create `Filler Groups` for any omitted levels in the hierarchy.
This means a partial hierarchy can be provided and the grid will use the provided row where possible, or create a `Filler Group` where not.

The example below demonstrates a case where two group rows were omitted from the provided hierarchy. The grid
highlights these omitted group rows by displaying 'Filler Group' in the 'Group Type' column.

{% gridExampleRunner title="Filler Groups" name="filler-nodes" exampleHeight=305 /%}

This uses the following dataset to provide data for the `D` and `E` group rows, but not the `A` and `B` group rows:
```{% frameworkTransform=true %}
const gridOptions = {
    rowData: [
        { path: ['A', 'B', 'C'], id: 'C' },

        { path: ['D'], id: 'D' },
        { path: ['D', 'E'], id: 'E' },
        { path: ['D', 'E', 'F'], id: 'F' },
    ],

    getDataPath: data => data.path,
};
```

{% note %}
As `Filler Groups` are generated by the grid, they will not contain a `data` property on the `RowNode`.

They also do not keep their state should the filler group be moved. E.g. when changing row path from `A->B->C`, to `D->B->C` group `B` will not keep its selection or expansion states.
{% /note %}

## Supplied vs Aggregated

When using Tree Data, columns defined with an aggregation function will always perform aggregations on the group nodes.
This means any supplied group data will be ignored in favour of the aggregated values.

{% gridExampleRunner title="Aggregated Data" name="aggregated-data" exampleHeight=350 /%}

The example above uses the configuration below to demonstrate the `Desktop` row is being aggregated to show
the sum of its children (4), rather than the provided value (1), despite both columns showing the same field:
```
const gridOptions = {
    treeData: true,
    columnDefs: [
        {
            headerName: 'Aggregated (Sum)',
            aggFunc: 'sum',
            field: 'items',
        },
        {
            headerName: 'Provided',
            field: 'items',
        },
    ],
};
```

Refer to the [Aggregation](./aggregation/) page for more details.

## Next Up
Continue to the next section to learn how to provide [Nested Records](./tree-data-nesting/).